<template>
  <transition name="bounce" mode="out-in">
    <section class="mui-content pd">
      <mh-header headName="选择账户"> </mh-header>
      <div class="choose-payment">
        <p class="mh-pd">请选择提现账户</p>
        <ul>
          <li :class='type==1 ? "payment mh-pd-lr active" : "payment mh-pd-lr"' @tap='selectType(1)'>
            <a href="javascript:">
              <img src="../../../assets/images/ico/ic_alipay.png" alt="支付宝">
              <span>支付宝</span>
              <span v-if='!alipay' class="mui-pull-right a-bind" @tap='toBind(1)'>去绑定 ></span>
            </a>
          </li>
          <li :class='type==2 ? "payment mh-pd-lr active" : "payment mh-pd-lr"' @tap='selectType(2)'>
            <a href="javascript:">
              <img src="../../../assets/images/ico/ic_wechat.png" alt="微信支付">
              <span>微信</span>
              <span v-if='!wxpay' class="mui-pull-right a-bind" @tap='toBind(2)'>去绑定 ></span>
            </a>
          </li>
        </ul>
      </div>
    </section>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header'
  import {MH_API} from "@/api/api";
  export default {
    name: "withdraw-account",
    components: {
      MhHeader
    },
    data(){
      return {
        type: null,
        alipay: false,
        wxpay: false
      }
    },
    methods: {
      selectType(type){
        if(type==1 && !this.alipay){
          return false
        }
        if(type==2 && !this.wxpay){
          return false
        }
        this.type = type
        window.localStorage.setItem("withdrawType", type);
      },
      toBind(type){
        this.$router.push({
          path: '/bindAccount',
          query: {
            type: type
          }
        })
      }
    },
    created(){
      let self = this;
      MH_API.getAccount({
        
      }).then(res => {
        if (res.status == 200) {
          let newArr = res.data;
          if(newArr.length && newArr.length > 0){
            for(let i=0,len=newArr.length;i<len;i++){
              if(newArr[i].type==1){
                self.alipay = true;
              }
              else if(newArr[i].type==2){
                self.wxpay = true;
              }
            }
          }
        }
      })
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../assets/css/mixin";
  .choose-payment {
    background: #fff;
    &>p {border-bottom: 1px solid #eee;}
  }
  .payment {
    position: relative;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
    background: url("../../../assets/images/ico/ic_vo_uncheck.png") no-repeat 95% center;
    background-size: 2.5rem 2.5rem;
    &.no-bind {
      background: none;
    }
    &.active {
      background: url("../../../assets/images/ico/ic_vo_check.png") no-repeat 95% center;
      background-size: 2.5rem 2.5rem;
    }
    img {width: 4rem;}
  }
  .a-bind {
    position:absolute; top:0; right: 0; background-color: #fff; height: 6rem; line-height:6rem; padding: 0 1rem; color:#2381fd; font-size:1.4rem;
  }

</style>
